<template>
	<view class="search_box">
		<!-- 搜索框 -->
		<view class="search_area">
			<uni-icons class="search_icon" type="search" size="26" color="#B1B1B1"></uni-icons>
			<input class="search_input" focus="true" v-model="searchContent" placeholder="输入关键字进行搜索"
				placeholder-style="color:#B1B1B1;font-size:36rpx;" type="text">
			<button class="search_btn" hover-class="click" @click="search">搜索</button>
		</view>
		<!-- 请求内容区 -->
		<view class="requested_content">
			<data-item :dataList="dataList"></data-item>

			<!-- 丢失物品，一键搜索 提示 -->
			<text class="tips_one" v-if="searchContent == '' && dataList.length == 0">丢失物品，一键搜索</text>

			<!-- 搜索结果为空 -->
			<view class="search_empty" v-else-if="searchContent != '' && dataList.length == 0 && dataSum == 0">
				<image src="/subpkg/searchPage/static/emptySearch.png" mode="aspectFill"></image>
				<text>无搜索结果</text>
			</view>

			<!-- 数据加载完提示 -->
			<text class="tips_two" v-else-if="searchContent != '' && dataList.length != 0 && isFinish == true">——— 我也是有底线的 ———</text>
		</view>
	</view>
</template>

<script>
	import dataItem from '@/components/dataItem/dataItem.vue'

	export default {
		name: 'search',
		components: {
			dataItem
		},
		data() {
			return {
				// 数据
				dataList: [],
				// 搜索框内容
				searchContent: '',
				// 数据总量
				dataSum: -1,
				// 固定的数据获取量
				requestNum: 8,
				// 当前页面
				currentPage: 0,
				// 数据是否加载完成
				isFinish: false
			};
		},
		methods: {
			// 点击按钮获取搜索数据
			search() {
				this.currentPage = 0
				this.dataList = []
				this.isFinish = false

				uni.showLoading({
					title: '搜索中...'
				})

				// 获取搜索的总数
				this.get_search_total().then(res => {
					this.dataSum = res.result.total
					// 如果获取的长度为0，让数据数组为空
					if (res.result.total == 0) {
						this.dataList = []
						uni.hideLoading()
					} else {
						// 如果不是0，则获取搜索数据
						this.get_search_info().then(res=>{
							this.dataList = [...this.dataList, ...res.result.data]
							uni.hideLoading()
						})
					}
					this.currentPage = 1
					this.isFinish = this.is_all_loaded()
				})
			},

			// 判断数据是否加载完成
			is_all_loaded() {
				if (this.currentPage * this.requestNum >= this.dataSum) {
					return true
				} else {
					return false
				}
			},

			// 调用云函数获取搜索的总数
			get_search_total() {
				return new Promise(resolve => {
					wx.cloud.callFunction({
						name: 'get_search_total',
						data: {
							searchContent: this.searchContent,
						}
					}).then(res => {
						console.log(res);
						resolve(res)
					})
				})

			},

			// 调用云函数获取搜索数据
			get_search_info() {
				return new Promise(resolve => {
					wx.cloud.callFunction({
						name: 'get_search_info',
						data: {
							searchContent: this.searchContent,
							requestNum: this.requestNum,
							currentNum: this.dataList.length
						}
					}).then(res => {
						console.log(res);
						resolve(res)
					})
				})
			}
		},

		onReachBottom() {
			this.isFinish = this.is_all_loaded()
			if (!this.isFinish) {
				uni.showLoading({
					title: '加载中...'
				})
				this.get_search_info().then(res=>{
					this.dataList = [...this.dataList, ...res.result.data]
					this.currentPage++
					uni.hideLoading()
				})
			}
		},

		onLoad() {
			this.isFinish = false
			this.currentPage = 0
		}
	}
</script>

<style scoped lang="scss">
	.search_box {
		background-color: #f7f7f7;
		width: 100vw;
		height: 100vh;

		.search_area {
			position: sticky;
			top: 0;
			display: flex;

			.search_icon {
				position: absolute;
				top: 15rpx;
				left: 10rpx;
			}

			.search_input {
				box-sizing: border-box;
				border: 2rpx solid #014DA1;
				width: 100vw;
				height: 80rpx;
				font-size: 36rpx;
				line-height: 36rpx;
				padding: 10rpx 10rpx 10rpx 60rpx;
				background-color: white;
			}

			button::after {
				border: none;
			}

			.search_btn {
				background-color: #014DA1;
				color: white;
				font-size: 36rpx;
				width: 150rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 0;
			}

			.click {
				background-color: #003d7e;
			}
		}

		.requested_content {
			display: flex;
			flex-direction: column;
			align-items: center;

			.tips_one {
				font-size: 32rpx;
				color: #B3B3B3;
				margin-top: 220rpx;
			}

			.search_empty {
				margin-top: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 300rpx;
					height: 300rpx;
				}

				text {
					font-size: 32rpx;
					color: #B3B3B3;
				}
			}

			.tips_two {
				margin: 40rpx;
				font-size: 24rpx;
				color: #B3B3B3;
			}
		}

	}
</style>
